<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/font-awesome.css" />
		<link rel="stylesheet" href="css/swiper.min.css" />
	</head>
	<body>
	<div style="width:100%;height:100%;overflow: scroll;position: absolute; -webkit-overflow-scrolling: touch;">
		<div class="tb-logo">
	    	<span class="float-l pic"><img src="img/logo.png" alt="" /></span>
	    	<div class="tb-srch">
		    	<span class="shuru"></sp><input type="text" /></span>
		    	<span class="fa fa-search btn" aria-hidden="true"></span>
		    </div>
	   </div>	 
	    
	    <div class="vd">
	    	<p><span>但是开机后点击</span> <span>01</span></p>
	    	<div class="bfq">
	    		<video controls="controls"  width="100%" poster='http://www.babailiren.com/bvm.jpg' x-webkit-airplay="true" webkit-playsinline="true">
	    			<source src="http://bblr.qiniudn.com/babailiren.mp4" type="video/mp4">
	    			<source src="http://bblr.qiniudn.com/babailiren.webm" type="video/webm">
	    			<!-- <source src="http://bblr.qiniudn.com/babailiren.ogg" type="video/ogg"> -->
				</video>
				<div class="gn">					
					<a class="fa fa-share-alt" aria-hidden="true" href="#"></a>
					<a href="#" class="fengx">分享</a>
					<a class="fa fa-weibo" aria-hidden="true" href="#"></a>
					<a class="fa fa-weixin" aria-hidden="true" href="#"></a>
					<a class="fa fa-qq" aria-hidden="true" href="#"></a>
					<a class="fa fa-thumbs-o-up padding-x" aria-hidden="true" href="#"></a>
					<a class="fengx" href="#">10000</a>
				</div>
	    	</div>	    
	    </div>
	    <ul class="list-tb  list-vd">
	    	<li class="li-ch">剧集列表</li>
	    	<li>剧集信息</li>
	    	<li>用户评论</li>
	    </ul>
	    <div class='bd' style="background: #ffffff;">
	    	<div class="detail-list">
	    		<ul class="xj-list">
	    			<li class="li-this">01</li>
	    			<li>02</li>
	    			<li>03</li>
	    			<li>04</li>
	    			<li>05</li>
	    			<li>06</li>
	    			<li>07</li>
	    			<li>08</li>
	    			<li>09</li>
	    			<li>10</li>
	    			<li>11</li>
	    			<li>12</li>
	    			<li>13</li>
	    			<li>14</li>
	    			<li>15</li>
	    			<li>16</li>
	    		</ul>
	    		<p>猜你喜欢</p>
	    		<ul class="film-ul width-half">
		    		<li>
		    			<img src="img/iu.jpg" alt="" />
		    			<span>李恩智</span>
		    		</li>
		    		<li>
		    			<img src="img/iu.jpg" alt="" />
		    			<span>李恩智</span>
		    		</li>
		    		<li>
		    			<img src="img/iu.jpg" alt="" />
		    			<span>李恩智</span>
		    		</li>
		    		<li>
		    			<img src="img/iu.jpg" alt="" />
		    			<span>李恩智</span>
		    		</li>		    		
		    	</ul>
	    	</div>
	    	<div class="detail-list ds-none">
	    		<h4 style="padding-bottom: 5px;">
					<strong>权利的游戏</strong>
				</h4>
				<ul class="xq-h">
					<li>类型：<span>科幻爱情</span></li>
					<li>导演：<span>史蒂芬·库里</span></li>
					<li>主演：<span>史蒂芬·库里 史蒂芬·库里 史蒂芬·库里</span></li>
					<li>简介：
						<p>是打飞机的回复就回到家发货的及恢复健康的书法家开始的恢复及客户的数据库放寒假的书法家开始的恢复健康和速度快恢复健康的书法家</p>
						<p>是打飞机的回复就回到家发货的及恢复健康的书法家开始的恢复及客户的数据库放寒假的书法家开始的恢复健康和速度快恢复健康的书法家</p>
						<p>是打飞机的回复就回到家发货的及恢复健康的书法家开始的恢复及客户的数据库放寒假的书法家开始的恢复健康和速度快恢复健康的书法家</p>
						<p>是打飞机的回复就回到家发货的及恢复健康的书法家开始的恢复及客户的数据库放寒假的书法家开始的恢复健康和速度快恢复健康的书法家</p>
					</li>
				</ul>
	    	</div>
	    	<div class="detail-list ds-none">
	    		<div class="pl-top">评论</div>
	    		<div class="pl-top">
	    			<div class="pl-self-tx"><img src="img/tx.jpg" alt="" /></div>
	    			<div class="pl-self-bd">
					我要评论
					</div>
	    		</div>
	    		<div class="pl-top">
	    			<div class="pl-self-tx"><img src="img/tx.jpg" alt="" /></div>
	    			<div class="pl-con">
	    				<div class="mc">李恩智</div>
	    				<div class="com">撒大声地撒多撒多大四的撒大所大所多的撒大所多撒大所多</div>
	    				<div class="gn">
	    					<span>10小时前</span>
	    					<span class="fa fa-commenting-o float-r pp"></span>	    					
	    					<span class="fa fa-thumbs-o-up float-r dz"></span>
	    					<span class="float-r mun">10</span>
	    				</div>
	    				<div class="hf">
	    					<div>
	    						<div class="pl-self-tx"><img src="img/tx.jpg" alt="" /></div>
		    					<div class="pl-con">
			    					<div class="mc">李恩智</div>
			    				    <div class="com">回复：@李恩智 撒大声地撒多撒多大四的撒大所大所多的撒大所多撒大所多</div>
			    					<div class="gn">
				    					<span>10小时前</span>
				    					<span class="fa fa-commenting-o float-r pp"></span>	    					
				    				</div>
				    			</div>
	    					</div>
	    					<div>
	    						<div class="pl-self-tx"><img src="img/tx.jpg" alt="" /></div>
		    					<div class="pl-con">
			    					<div class="mc">李恩智</div>
			    				    <div class="com">回复：撒大声地撒多撒多大四的撒大所大所多的撒大所多撒大所多</div>
			    					<div class="gn">
				    					<span>10小时前</span>
				    					<span class="fa fa-commenting-o float-r pp"></span>	    					
				    				</div>
				    			</div>
	    					</div>
	    					<div class="hf-more">
	    						查看全部回复
	    					</div>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
	    </div>
	    
	    	    
	    <div class="footer">
	    	<div class="footer-bd">
	    		<ul>
	    			<li><a href="#">关于</a></li>
	    			<li><a href="#">招聘</a></li>
	    			<li><a href="#">反馈</a></li>
	    			<li><a href="#">帮助</a></li>
	    			<li><a href="#">About Us</a></li>
	    		</ul>
	    		<p class="bq">
	    			Copyright © 2016 All Rights Reserved.
	    		</p>
	    	</div>
	    </div>
	       </div>
       <div style="" class="ssx">
        	<div class="tc-input">
        		<span class="titlex">评论<span class="fa fa-times close" aria-hidden="true"></span></span>
        		<textarea placeholder="回复@李恩智"></textarea>
			    <span class="fabiao"><a href="#">发表</a></span>
			</div>
        </div>

	    	

	    
		<script type="text/javascript" src="js/jquery-2.2.3.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
	    <script type="text/javascript">
	    	$(document).ready(function(){
	    		$('.pl-self-bd').click(function(){                	
	                $('.ssx').show();
	                $('.tc-input textarea').focus();	                
	            });
                $('.tc-input textarea').blur(function(){
                	$('.ssx').hide();
                });
                $('.tc-input .close').click(function(){
                	$('.ssx').hide();
                }); 
	    		$('.list-vd li').each(function(index){
	    		 	$(this).click(function(){
	                 	$(this).addClass('li-ch').siblings().removeClass('li-ch');
	                 	$('.detail-list').eq(index).removeClass('ds-none').siblings().addClass('ds-none')
	                 });
	    		 })
                 
                 $('.xj-list li').click(function(){
                 	$(this).addClass('li-this').siblings().removeClass('li-this')
                 });
                 $('.dz').click(function(){
                 	$(this).css('color','#ed7500');
                 })                                
//              function showTime(){
//               	
//               	var hh=$(window).height()-$('.tc-input').height();  	                 	
//	                $('.tc-input').css('top',hh);
//	                if($('.gg').show()){
//	                	$('.tc-input input').blur(function(){
//		                   $('.gg').hide();
//		                });
//	                }
//	                
//              }                
               
                $('.pl-self-bd').click(function(){                	 		                 	
//	                setInterval(showTime, 500);                                 	
	                $('.ssx').show();
	            });
	        }); 
	    </script>
	</body>
</html>